'use client';

import React, { useState, useEffect } from 'react';
import { 
  Layout, 
  Menu, 
  Avatar, 
  Dropdown, 
  Badge, 
  message, 
  Breadcrumb,
  theme
} from 'antd';
import { 
  DashboardOutlined, 
  ShopOutlined, 
  UserOutlined, 
  ShoppingCartOutlined,
  FileTextOutlined,
  BarChartOutlined,
  SettingOutlined,
  LogoutOutlined,
  BellOutlined,
  QrcodeOutlined
} from '@ant-design/icons';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

const { Sider, Content } = Layout;
const { useToken } = theme;

interface AdminLayoutProps {
  children: React.ReactNode;
  selectedKey?: string;
  breadcrumbItems?: { title: React.ReactNode; href?: string }[];
}

const AdminLayout: React.FC<AdminLayoutProps> = ({ 
  children, 
  selectedKey = '1',
  breadcrumbItems = []
}) => {
  const [collapsed, setCollapsed] = useState(false);
  const [userInfo, setUserInfo] = useState<any>(null);
  const router = useRouter();
  const { token } = useToken();

  useEffect(() => {
    checkAdminAuth();
  }, []);

  const checkAdminAuth = () => {
    const token = localStorage.getItem('seafood_token');
    const userStr = localStorage.getItem('seafood_user');
    
    if (!token || !userStr) {
      message.error('请先登录');
      router.push('/login');
      return;
    }

    try {
      const user = JSON.parse(userStr);
      if (user.userType !== 'ADMIN') {
        message.error('无管理员权限');
        router.push('/');
        return;
      }
      setUserInfo(user);
    } catch (error) {
      message.error('用户信息错误');
      router.push('/login');
    }
  };

  const menuItems = [
    {
      key: '1',
      icon: <DashboardOutlined />,
      label: <Link href="/admin">仪表盘</Link>,
    },
    {
      key: '2',
      icon: <ShopOutlined />,
      label: <Link href="/admin/products">产品管理</Link>,
    },
    {
      key: '3',
      icon: <UserOutlined />,
      label: <Link href="/admin/users">用户管理</Link>,
    },
    {
      key: '4',
      icon: <ShoppingCartOutlined />,
      label: <Link href="/admin/orders">订单管理</Link>,
    },
    {
      key: '5',
      icon: <QrcodeOutlined />,
      label: <Link href="/admin/traceability">溯源管理</Link>,
    },
    {
      key: '6',
      icon: <BarChartOutlined />,
      label: <Link href="/admin/analytics">数据分析</Link>,
    },
    {
      key: '7',
      icon: <SettingOutlined />,
      label: <Link href="/admin/settings">系统设置</Link>,
    },
  ];

  if (!userInfo) {
    return <div>Loading...</div>;
  }

  // 默认面包屑项
  const defaultBreadcrumbItems = [
    { title: <Link href="/admin">首页</Link> },
    ...breadcrumbItems
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        collapsible 
        collapsed={collapsed} 
        onCollapse={setCollapsed}
        theme="dark"
        width={240}
        style={{
          borderRight: `1px solid ${token.colorBorder}`,
          boxShadow: '2px 0 8px 0 rgba(29,35,41,.05)'
        }}
      >
        <div style={{ 
          height: 32, 
          margin: 16, 
          background: 'rgba(255, 255, 255, 0.2)',
          borderRadius: 6,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold',
          fontSize: collapsed ? '12px' : '14px',
          transition: 'font-size 0.3s'
        }}>
          {collapsed ? 'STP' : '海产品交易平台'}
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={[selectedKey]}
          mode="inline"
          items={menuItems}
          style={{ 
            borderRight: 0,
            background: 'transparent',
            marginTop: '8px'
          }}
        />
      </Sider>
      
      <Layout>
        {/* 面包屑导航 */}
        {breadcrumbItems.length > 0 && (
          <div style={{ 
            padding: '12px 24px',
            background: token.colorBgContainer,
            borderBottom: `1px solid ${token.colorBorderSecondary}`,
            boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03)'
          }}>
            <Breadcrumb items={defaultBreadcrumbItems} />
          </div>
        )}
        
        <Content style={{ 
          margin: '16px 24px',
          background: token.colorBgContainer,
          borderRadius: '8px',
          minHeight: 'calc(100vh - 144px)',
          overflow: 'hidden',
          boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)'
        }}>
          <div style={{ 
            height: '100%', 
            overflowY: 'auto',
            padding: '24px',
            scrollbarWidth: 'thin',
            scrollbarColor: `${token.colorFillTertiary} ${token.colorBgContainer}`
          }}>
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;